﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";
@import "../../styles/utilities/position";

.madal-wrapper {
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: none;
    text-align: center;
    .modal-overlayer {
        @extend .full-fixed;
        background-color: rgba(0, 0, 0, 0.54);
        z-index: 1000;
        opacity: 0.5;
    }

    &.active {
        display: block;
    }

    .modal {
        position: relative;
        z-index: 1001;
        top: rem(200);
        display: none;
        flex-direction: column;
        overflow: hidden;
        margin: auto;
        text-align: left;
        border-radius: rem(5);
        border: solid 1px #ccc;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
        &.zoom-enter {
            display: flex;
            transform: scale(0);
        }
        &.animate-actived {
            display: flex;
        }

        .modal-header {
            height: rem(60);
            display: flex;
            align-items: center;
            padding: 0 $d8;
            flex-shrink: 0;
            font-size: rem(16);
            //border-bottom: solid #e8e8e8 1px;
        }
        .modal-content {
            flex-shrink: 1;
            color: #666;
            padding: $d2 $d6;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .modal-buttons {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: flex-end;
            height: rem(60);
            width: 100%;
            //border-top: solid #e8e8e8 1px;
            padding-right: $d6;
            .btn {
                margin-left: $d2;
                margin-bottom: 0;
            }
        }

        &.modal-confirm, &.modal-alert, &.modal-info, &.modal-warn, &.modal-error, &.modal-success {
            .modal-header {
                border-bottom: none;
                > .iconfont {
                    font-size: rem(18);
                    margin-right: $d2;
                }
            }
            .modal-buttons {
                border-top: none
            }
            .modal-content {
                padding-left: rem(58);
                font-size: rem(16);

            }
        }
        &.modal-alert {
            .modal-content {
                padding: $d8 $d8;
            }
        }
        &.modal-info {
            .modal-header {
                > .iconfont {
                    color: $info;
                }
            }
        }
        &.modal-success {
            .modal-header {
                > .iconfont {
                    color: $success;
                }
            }
        }
        &.modal-warn {
            .modal-header {
                > .iconfont {
                    color: $warning;
                }
            }
        }
        &.modal-error {
            .modal-header {
                > .iconfont {
                    color: $danger;
                }
            }
        }
        &.modal-confirm {

        }

    }
}
